<!--
 * @Description: 看板
 * @Author: lwx
 * @Date: 2023-04-04 09:53:43
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-13 09:49:23
-->
<template>
  <div class="dashboard">
    <!-- 头部标题 -->
    <div class="relative">
      <img src="@/assets/img/dashboard_header.png" class="w-100">
      <date-time/>
    </div>
    <div class="d_body">
      <!-- 今日累计生产 -->
      <process-num />
      <div class="d_content">
        <div class="column">
          <div class="panel panel-left-1">
             <div class="_title">今日生产计划</div>
             <product-plan/>
          </div>
          <div class="panel panel-left-2">
             <div class="_title">今日生产信息</div>
             <day-chart/>
          </div>
          <div class="panel panel-left-3">
             <div class="_title">在产订单信息</div>
             <order-info/>
          </div>
        </div>
        <div class="column">
           <div class="panel-center-1">
             <device-line/>
           </div>
           <div class="panel panel-left-3">
             <div class="_title">工位信息</div>
             <device-yield/>
           </div>
        </div>
        <div class="column">
          <div class="panel panel-right-1">
             <div class="_title">产品视频</div>
             <company-video/>
          </div>
          <div class="panel panel-right-2">
             <div class="_title">设备效率</div>
             <device-oee/>
          </div>
          <div class="panel panel-left-3">
             <div class="_title">设备维护</div>
             <device-maintain/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DateTime from './childComps/DateTime.vue';
import ProcessNum from './childComps/ProcessNum.vue';
import ProductPlan from './childComps/ProductPlan.vue'
import dayChart from '@/components/echart/dayChart'
import OrderInfo from './childComps/OrderInfo.vue'
import CompanyVideo from './childComps/CompanyVideo.vue';
import DeviceOee from './childComps/DeviceOEE.vue'
import DeviceMaintain from './childComps/DeviceMaintain.vue'
import DeviceYield from './childComps/DeviceYield.vue';
import DeviceLine from './childComps/DeviceLine.vue';

export default {
  components:{
    DateTime,
    ProcessNum,
    ProductPlan,
    dayChart,
    OrderInfo,
    CompanyVideo,
    DeviceOee,
    DeviceMaintain,
    DeviceYield,
    DeviceLine
  },
  data () {
    return {
    }
  }
}
</script>
<style lang='scss' scoped>
.dashboard{
  width: 100%;
  height: 100%;
  color: #fff;
  position: relative;
  background-color: #010429;
  background-size: 100% 100%;
  overflow: auto;
  font-size: .25rem;
  font-family: Arial, Helvetica, sans-serif;
}
.d_body{
  padding: .2rem .469rem .1876rem;
}
.d_content{
  display: flex;
  margin-top: .3rem;
}
.column {
    flex: 1;
}

.column:nth-child(2) {
    flex: 2;
    margin: 0 .3752rem;
}
.panel{
  position: relative;
  background:url("../../assets/img/dash_border.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: .2rem;
  ._title{
    font-size: .285rem;
    height: .75rem;
    line-height: .75rem;
    padding: 0 .3752rem;
    color: #17caf0;
    text-shadow: 0 0 .0938rem #17caf0;
  }
}
.panel-left-1{
  height: 2.6rem;
}
.panel-left-2{
  height: 3.8rem;
}
.panel-left-3{
  height: 4rem;
}

.panel-right-1{
  height: 3.5rem;
}
.panel-right-2{
  height: 2.9rem;
}

.panel-center-1{
  height: 6.8rem
}
</style>